<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">

    <el-button style="position: absolute; right: 26px; top:3px;" type="primary" size="mini" @click=" dialog = true "
      round>库房状态查询</el-button>
    <div
      style="text-align: left ;font-size: 14px;background-color: #E9EEF3; height: 95px; margin: 10px; padding: 4px; border-radius: 7px;">
      <el-row style="padding: 10px; line-height: 21px;">
        <el-col :sapn="24">
          <p>符合条件的配置单总数：9例 </p>
        </el-col>
        <el-col :sapn="10">
          <p style="color: red">其中等待执行的配置单总数：0例</p>
        </el-col>
        <el-col :sapn="10">
          <p style="color: green;">其中正在执行的配置单数：0例</p>
        </el-col>
        <el-col :sapn="10">
          <p style="color: blue;">其中完成的配置单数：0例</p>
        </el-col>
      </el-row>
		
    </div>
    <div style="background-color: #E9EEF3; height: 346px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100% ">
          <el-table-column prop="pSige_idkc" label="配置单编号" width="420">
          </el-table-column>
          <el-table-column prop="cpbh" label="产品编号" width="100">
          </el-table-column>
          <el-table-column prop="cpmc" label="产品名称" width="100">
          </el-table-column>
          <el-table-column prop="reviewSign" label="复核状态" width="100">
          </el-table-column>
           <el-table-column label="查看" width="100" >
           <template slot-scope="scope">
                <el-button size="mini" @click.native.prevent="	ddd(scope.row.cpbh)" round>查看</el-button>
           </template>
         </el-table-column>
        </el-table>
      </template>

      <div class="block" style="margin-top: 2px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="14"
          :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>


    <el-drawer title="" :before-close="handleClose" :visible.sync="dialog" direction="rtl" custom-class="demo-drawer"
      ref="drawer">
      <div class="demo-drawer__content" style="background-color: whitesmoke; padding: 10px;">
        <el-form :model="form">
          <el-form-item label="I级分类" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="II级分类" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="III级分类" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请选择产品" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">
            <el-select v-model="form.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="建档时间 起" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">

          </el-form-item>
          <el-form-item label="至" :label-width="formLabelWidth" style="margin-bottom: 18px;margin-right: 45px;">

          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button style="height: 25px; width: 45px;" @click="cancelForm">取 消</el-button>
          <el-button style="height: 25px; width: 45px; background-color: #C0C4CC;" type="infor"
            @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

<el-dialog
  title="安全庫存配置單"
  :visible.sync="dialogVisible"
  width="62%"
  height="300px"
  :before-close="handleClose">
<div id="father">
    <el-container>
      <div id="son">
        <el-row>
          <el-col :span="7">
              &nbsp;&nbsp;&nbsp;&nbsp;产品名称:{{cpmc}}
          </el-col>
          <el-col :span="15">
            产品编号:{{cpbh}}
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="9">
           库存报警下限数: <input type="text" v-model="down" id="inp" style=" margin-top: 15px;" />
          </el-col>
          <el-col :span="15" >
            库存报警上限数: <input type="text" v-model="up" id="inp" style=" margin-top: 15px;" />
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="9" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            设计人:<input type="text" v-model="denjiPerson" id="inp" style=" margin-top: 15px;" />
          </el-col>
        </el-row>
      </div>
    </el-container>
    <el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%;margin-top: 15px;"
      @selection-change="handleSelectionChange" size="mini">
    <el-table-column prop="pSige_idkc" label="序号" width="100">
   </el-table-column>
      <el-table-column prop="houseName" label="库存名称" width="130">
        
      </el-table-column>
      <el-table-column prop="proidClass" label="存储地址编号" width="120">
      </el-table-column>
      <el-table-column prop="pronameClass" label="存储地址名称" width="150">
      </el-table-column>
      <el-table-column prop="ccmiaoshu" label="存储单元简称" width="130">		
      </el-table-column>
      <el-table-column prop="maxupkc" label="最大存储量" width="128">				
      </el-table-column>
      <el-table-column prop="cuncudanwei" label="存储单位" width="140">		
      </el-table-column>
    </el-table>
    <div id="sons">
      <el-row>
        <el-col :span="9">
          登记人:<input type="text" v-model="djr" id="inp" style=" margin-top: 10px;" />
        </el-col>
        <el-col :span="15" :offset="3">
          登记时间 <input type="text" v-model="time" id="inp" style=" margin-top: 10px;" />
        </el-col>
      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="2" style="margin-left: 72px;">
          配置要求:
        </el-col>
        <el-col :span="16">
          <textarea v-model="yaoqiu" style="width: 100%; height: 170px;">
          </textarea>
        </el-col>
      </el-row>
    </div>
  </div>
  <span slot="footer" >
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>



  </div>
</template>

<script>
  export default {
    name: 'repsel',
    data() {
      return {
        tableData: [{
					pSige_idkc:'',
					cpbh:'',
					cpmc:'',
					reviewSign:''
				}],
				 dialogVisible:false,
        table: false,
        dialog: false,
        loading: false,
        gridData: [],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
				tableDataa: [{
					pSige_idkc:'',
					houseName:'',
					proidClass:'',
				  pronameClass:'',
					ccmiaoshu:'',
					maxupkc:'',
					cuncudanwei:'',
				}],
				cpmc:'',
				cpbh:'',
			down:'',
			up:'',
			denjiPerson:'',
			time:'',
			yaoqiu:'',
        formLabelWidth: '90px',
        timer: null,

      }
    },
		mounted(){
			this.$http.post("selRepadminyfh")
			.then((res) => {														
							 this.tableData=res.data;		
														
					})
					.catch((err) => { //请求失败
				console.log(err);
			}); 
		}
		,
    methods: {
				ddd:function(row){
					this.dialogVisible=true;
				var demo=new URLSearchParams()
				demo.append("cpbh",row)
				this.$http.post("selidRepadminyfh",demo)
				.then((rew)=>{
					  this.tableDataa=rew.data;
						this.cpmc=rew.data[0].cpmc;
						this.cpbh=rew.data[0].cpbh;
						this.down=rew.data[0].downkc;
						this.up=rew.data[0].upkc;
						this.denjiPerson=rew.data[0].denjiPersonkc;
						this.time=rew.data[0].timekc;
						this.yaoqiu=rew.data[0].yaoqiukc;
						
					
						
						
				})
					.catch((err) => { //请求失败
					console.log(err);
				}); 
			   
			},
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      handleClose(done) {
        if (this.loading) {
          return;
        }
        this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
      },
      cancelForm() {
        this.loading = false;
        this.dialog = false;
        clearTimeout(this.timer);
      },
			
    }
  }
</script>

<style scoped="scoped">
  * {
    padding: 0px;
    margin: 0px;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  .el-input__inner {
    height: 28px;
  }
	
	#inp {
	    border-top: none;
	    border-left: none;
	    border-right: none;
	  }
	#inp1{
		 border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: none;
	}
	 #father {
	  height: 480px;
	  overflow: hidden;
	  background: white;
	  border: 1px solid white;
	  border-radius: 12px;
	
	}
	
	#sons {
	  /* margin: 9px auto; */
	
	  width: 100%;
	  padding: 0px;
	  background-color: white;
	  margin-top: 15px;
	  /* border: 3px solid whitesmoke; */
	  /* border-radius: 16px; */
	
	}
	
	#son {
	
	padding: 15px;
	  width: 100%;
	  background-color: white;
	
	}
	th {
	  border-top-color: #000000;
	}
</style>
